25 Variations
This project explores 25 variations of William Wordsworth’s poem I Wandered Lonely as a Cloud (1802).
The 25 variations are broken into 5 levels, each with specific constraints on the use of HTML and CSS.
| 25 Variations – William Wordsworth’s I Wandered Lonely as a Cloud | ||||
|---|---|---|---|---|
| Level | Description | HTML Restrictions | CSS Restrictions | Focus |
| 1 | Basic text structure and spacing | Use only p, br, and | None | Experiment with breaking and shaping the text — spacing, density, scroll length |
| 2 | Hierarchy and scale with markup | Add div, span, headings (h1–h6), strong, em, lists, and internal a links | None | Explore hierarchy and scale using HTML only |
| 3 | Introduce spatial composition | Same as Levels 1–2 | Padding, border, margin, position, display, float, top/right/bottom/left, height, width | Experiment with positioning — try very tall or very wide layouts |
| 4 | Typography emphasis | Same as Levels 1–2 | All Level 3 CSS plus: font-style, font-weight, font-size, font-family, text-align, line-height, letter-spacing, text-transform | Focus on typographic hierarchy, rhythm, and scale |
| 5 | Full visual freedom | Any HTML element (except img, iframe, or external a links) | Any CSS property | Push the limits — use color, advanced layouts, animations, and consider accessibility |